<template>
	<view class="recharge-page">
		<custom-title-bar bgColor="transparent" back> 会员充值 </custom-title-bar>

		<wd-toast />

		<!-- 背景 -->
		<view class="bg">
			<image class="bg-img" src="/static/images/recharge-bg.png" mode="aspectFill"></image>
		</view>

		<view class="content">
			<!-- 用户余额 -->
			<view class="balance container m-auto">
				<view class="balance-text">
					<text>用户余额（元）</text>
				</view>
				<view class="balance-num m-auto truncate">
					<text>168.00</text>
				</view>
			</view>

			<!-- 选择充值金额 -->
			<view class="amount-selection container m-auto">
				<view class="title">选择充值金额</view>
				<!-- 金额选项 -->
				<view class="options flex-between">
					<view class="option" @click="changeCurrentAmount(30)" :class="currentAmount === 30 ? 'option-active' : ''">
						<view class="num flex-center">
							<view class="identifier">¥</view>
							<view>30</view>
						</view>
						<view class="gift">赠送3元</view>
					</view>
					<view class="option" @click="changeCurrentAmount(50)" :class="currentAmount === 50 ? 'option-active' : ''">
						<view class="num flex-center">
							<view class="identifier">¥</view>
							<view>50</view>
						</view>
						<view class="gift">赠送5元</view>
					</view>
					<view class="option" @click="changeCurrentAmount(100)" :class="currentAmount === 100 ? 'option-active' : ''">
						<view class="num flex-center">
							<view class="identifier">¥</view>
							<view>100</view>
						</view>
						<view class="gift">赠送10元</view>
					</view>
				</view>
				<!-- 自定义充值金额 -->
				<view class="custom-amount">
					<view class="identifier flex-center"> ¥ </view>
					<input v-model.number="customAmount" class="input-amount" type="number" maxlength="3" placeholder="输入自定义金额"
						placeholder-class="input-placeholder" @focus="currentAmount = 0" />
				</view>
			</view>

			<!-- 充值说明 -->
			<view class="instructions container m-auto">
				<view>
					充值说明
					<view> </view>
					1、本次充值可用于平台上消费，各地区跨站点皆可使用。
					<view> </view>
					2、若遇到充值未到账，请联系客服。
				</view>
			</view>

			<!-- 充值按钮 -->
			<view class="confirm">
				<view class="btn container m-auto" @click="confirmRecharge">
					充值
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue'
	import {
		useToast
	} from '/node_modules/wot-design-uni'

	// 消息提示
	const toast = useToast()

	// 当前选中的充值金额
	const currentAmount = ref(0)
	const changeCurrentAmount = (amount) => {
		if (typeof amount !== 'number') return;
		currentAmount.value = amount
		customAmount.value = null
	}
	// 金额选项激活样式
	const amountOptionActive = (amount) => {
		if (Number(currentAmount.value) === amount) {
			return 'option-active'
		}
	}

	// 自定义充值金额
	const customAmount = ref();

	// 确认充值的金额
	const confirmAmount = computed(() => {
		if (Number(customAmount.value) >= 1) {
			return customAmount.value;
		}
		return currentAmount.value;
	})

	// 确认充值
	const confirmRecharge = () => {
		if (typeof confirmAmount.value !== 'number' || Number(confirmAmount.value) < 1) {
			toast.warning({
				position: 'middle',
				msg: '充值金额不能小于 1 元'
			})
			return
		}
		toast.success({
			msg: '充值成功',
			position: 'middle',
		})
	}
</script>

<style lang="scss" scoped>
	// 背景
	.bg {
		top: 0;
		z-index: 0;
		width: 100%;
		height: 400rpx;
		position: fixed;

		.bg-img {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		z-index: 50;
		position: relative;
	}

	// 用户余额
	.balance {
		height: 215rpx;
		overflow: hidden;
		margin-top: 40rpx;
		border-radius: 20rpx;
		background-color: #5DB275;

		.balance-text {
			width: 100%;
			color: #D5EDF2;
			font-size: 26rpx;
			font-weight: 400;
			padding: 0 40rpx;
			margin-top: 36rpx;
		}

		.balance-num {
			width: 88%;
			color: white;
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
	}

	// 选择充值金额
	.amount-selection {
		margin-top: 66rpx;

		.title {
			color: #3B3B3B;
			font-size: 500;
			font-weight: bold;
			padding-left: 4rpx;
			letter-spacing: 2rpx;
		}

		// 金额选项
		.options {
			width: 100%;

			margin-top: 28rpx;

			.option {
				display: flex;
				width: 210rpx;
				height: 200rpx;
				align-items: center;
				border-radius: 16rpx;
				flex-direction: column;
				background-color: #eee;
				justify-content: space-evenly;

				.num {
					color: #333;
					font-size: 48rpx;
					font-weight: bold;

					.identifier {
						margin-top: 8rpx;
						font-size: 32rpx;
					}
				}

				// 赠送金额
				.gift {
					color: #999;
					font-size: 22rpx;
					text-align: center;
				}
			}

			// 选项选中状态
			.option-active {
				background-color: $primary-color;

				.num {
					color: #fff;
				}

				.gift {
					color: #eee;
				}
			}
		}

		// 自定义充值金额
		.custom-amount {
			width: 100%;
			display: flex;
			height: 100rpx;
			margin-top: 40rpx;
			align-items: center;
			border-radius: 16rpx;
			background-color: #eee;

			.identifier {
				height: 100%;
				width: 100rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: $primary-color;
			}

			.input-amount {
				font-size: 28rpx;
				font-weight: bold;
				color: $primary-color;
				width: calc(100% - 140rpx);
			}
		}
	}

	// 充值说明
	.instructions {
		color: #999;
		font-size: 24rpx;
		margin-top: 40rpx;
	}

	// 确认充值按钮
	.confirm {
		width: 100%;
		bottom: 68rpx;
		position: fixed;

		.btn {
			color: #fff;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			text-align: center;
			border-radius: 80rpx;
			letter-spacing: 4rpx;
			background-color: $primary-color;
		}
	}
</style>